<template>
	<view v-if="form">
		<!-- 头部导航栏 -->
		<view style="display: flex;justify-content: space-between;align-items: center;padding: 18rpx 20rpx">
			<view style="display: flex;" @click="back">
				<u-icon name="arrow-left"></u-icon>
				<view>返回</view>
			</view>
			
			<view @click="setting" style="display: flex;align-items: center;;padding: 20rpx 25rpx;margin: 0 10rpx;border-radius: 10rpx;box-shadow: 0 0 14px 0 #66666635;border: solid 1rpx #ddd;">
				<u-icon name="setting"></u-icon>
				<view style="margin-left: 10rpx;">
					公众号设置
				</view>
			</view>
		</view>
		<u-cell-group>
			<u-cell title="公众号名称">
				<template #value>
					<view>
						<u-input v-model="form.name" placeholder="请输入公众号名称"></u-input>
					</view>
				</template>
			</u-cell>
			
			<u-cell title="图标">
				<template #value>
					<view>
						<u-upload :fileList="iconFileList" :multiple="false" :max-count="1" 
						@delete="(event)=>deleteFile(event,iconFileList,()=>form.icon_url=null)"
						@afterRead="(event)=>afterRead(event,iconFileList,uploadIcon)">
							
						</u-upload>
					</view>
				</template>
			</u-cell>
			
			<u-cell title="二维码" >
				<template #value>
					<view>
						<u-upload :fileList="qrcodeFileList" :multiple="false" :max-count="1" 
							@delete="(event)=>deleteFile(event,qrcodeFileList,()=>form.qrcorde_url=null)"
							@afterRead="(event)=>afterRead(event,qrcodeFileList,uploadQrcode)">	
						</u-upload>
					</view>
				</template>
			</u-cell>
			
			<u-cell title="AppId">
				<template #value>
					<view>
						<u-input v-model="form.app_id" placeholder="请输入APPID"></u-input>
					</view>
				</template>
			</u-cell>
			
			
			<u-cell title="Secret">
				<template #value>
					<view>
						<u-input v-model="form.secret" placeholder="请输入公众号密钥"></u-input>
					</view>
				</template>
			</u-cell>
			
			<u-cell title="Token">
				<template #value>
					<view>
						<u-input v-model="form.token" placeholder="请输入公众号Token"></u-input>
					</view>
				</template>
			</u-cell>
			
			<u-cell title="AesKey">
				<template #value>
					<view>
						<u-input v-model="form.aes_key" placeholder="请输入公众号AESKEY"></u-input>
					</view>
				</template>
			</u-cell>
			
		</u-cell-group>
	</view>
	
	
	<view style="padding-top: 60px;"></view>
	
	<view @click="showComfirmModal=true" style="
		position: fixed;bottom: 0;
		left:0;right:0;
		height: 60px;
		display: flex;
		align-items: center;
		background-color: white;
		border-top: solid 1rpx #eee;
		"
	>
		<view @click="onCreateComfirm" style="
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 0rpx;
			border-radius: 10rpx;
			box-shadow: 0 0 14px 0 #66666635;
			border: solid 1rpx #ddd;
			top:10px;bottom: 10px;left:10px;right: 10px; 
			position: absolute;
		">
				确定修改
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				office_id:0,
				form:{
					name:'测试公众号',
					app_id:'wxd96f2c1982b61eb2',
					secret: 'd16523ef6c83a4796853dab4eb79671b',
					token: 'ZEJiycTmUyHzsPEFxEJtTBSOSLgrgXzd',
					aes_key: 'kOGMLaVhOUTRv627uuWsEzfEKleXBTUOmcEGCZGuQYC',
					qrcorde_url:'http://www.apesk.net/static/officeQrcode.jpg',
					icon_url:'http://www.apesk.net/cdn/static/office-qrcode.jpg'
				},
				qrcodeFileList:[],
				iconFileList:[],
				rules:{
					'name': [
						{
							required:true,
							message:'请输入公众号名称'
						}
					],
					'icon_url' : [
						{
							required:true,
							message:'请选择公众号图标'
						}
					],
					'qrcorde_url' : [
						{
							required:true,
							message:'请选择二维码图片'
						},
						{
							type:'url',
							message: '请上传正确的二维码图片'
						}
					],
					'app_id':[
						{
							required : true,
							message: '请输入公众号(订阅号)AppID'
						},
						{
							len : 18,
							message: '请输入正确的32为APPID'
						},
						{
							validator : (rule,value)=>this.$u.test.enOrNum(value),
							message: '请输入AppId只能包含字母和数字'
						}
					],
					'secret':[
						{
							required : true,
							message: '请输入公众号Secret'
						},
						{
							max : 128,
							message: 'Secret长度不能大于128'
						},
						{
							validator : (rule,value)=>this.$u.test.enOrNum(value),
							message: '请输入Secret只能包含字母和数字'
						}
					],
					'token':[
						{
							required : true,
							message: '请输入公众号Token'
						},
						{
							max : 128,
							message: 'Token长度不能大于128'
						},
						{
							validator : (rule,value)=>this.$u.test.enOrNum(value),
							message: '请输入Token只能包含字母和数字'
						}
					],
					'aes_key':[
						{
							required : true,
							message: '请输入公众号AesKey'
						},
						{
							max : 128,
							message: 'AesKey长度不能大于128'
						},
						{
							validator : (rule,value)=>this.$u.test.enOrNum(value),
							message: '请输入AesKey只能包含字母和数字'
						}
					]
				}
			} 
		},
		async onLoad(options){
			console.log(options.office_id)
			this.office_id = options.office_id
			let res = await this.$http.get(`common/wx/account?office_id=${options.office_id}`)
			this.form = this.$lodash.pick(res.data,"name","app_id","secret","token","aes_key","qrcorde_url","icon_url")
			this.qrcodeFileList.push({url:this.form.qrcorde_url}),
			this.iconFileList.push({url:this.form.icon_url})
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			async afterRead(event,filelist,cb)
			{
				console.log(event)
				
				if(cb && await cb(event.file))
				{
					filelist.push({
						...event.file
					})
				}
			},
			async uploadQrcode(file){
				let res = await this.$netTool.handleUploadFile(this.apiUrl('common/storage/upload/image'),
				file.url,
				'image',
				'image',{},{},
				{
					blob:{
						filename:'image.png',
						mimeType: 'image/png',
					}
				})
				
				this.form.qrcorde_url = this.absUrl(res.data.path) //'http://www.apesk.net/static/officeQrcode.jpg'
				return true
			},
			async uploadIcon(file){
				let res = await this.$netTool.handleUploadFile(this.apiUrl('common/storage/upload/image'),
				file.url,
				'image',
				'image',{},{},
				{
					blob:{
						filename:'image.png',
						mimeType: 'image/png',
					}
				})
				
				this.form.icon_url = this.absUrl(res.data.path) //'http://www.apesk.net/static/officeQrcode.jpg'
				return true
			},
			deleteFile(event,filelist,cb){
				filelist.splice(event.index,1)
				if(cb) cb(event)
			},
			async onCreateComfirm(){
				
				try{
					await this.validate(this.rules,this.form)
					
					uni.showLoading({
						title:'正在提交'
					})
					
					const res = await this.$http.post('common/wx/account_modify',{...this.form,office_id:this.office_id})
					uni.hideLoading()
					
					uni.showToast({
						title: '修改成功',
						mask:true,
						duration:400
					})
					
					setTimeout(function() {
						uni.navigateBack()
					}, 500);
					
				}catch(e){
					//TODO handle the exception
					console.log(e)
					uni.showToast({
						icon:'none',
						title: e.errors[0].message
					})
				}

			}
		}
	}
</script>

<style>

</style>
